<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from 'vue-router'
import axios from "axios";
const router = useRouter();

const count = ref(0);
const page = ref(1);
const nums = ref(100);
const userdat = reactive([])
const next = async () => {
    page.value++;
    if (page.value >count.value) {
        page.value = count.value;
        alert("到底了")
    } else {
        try {
            const { data } = await axios.get("http://localhost:8080/dat", {
                params: {
                    page: page.value

                }
            });
            // console.log(data.length)
            userdat.splice(0)
            // console.log(userdat)
            // console.log("测试")
            for (let i = 0; i < data.length; i++) {
                userdat.push(data[i])
            }
            // console.log(userdat)

            nums.value = (page.value - 1) * 100;
            if (nums.value > count.value * 100) {
                nums.value = 100;
            }

        } catch (error) {
            console.error("请求失败:", error);
        }
    }
}
const up = async () => {
    page.value--;
    if (page.value <=0) {
        page.value = 1;
        alert("已经是第一页了")
    } else {
        try {
            const { data } = await axios.get("http://localhost:8080/dat", {
                params: {
                    page: page.value,

                }
            });
            userdat.splice(0)

            for (let i = 0; i < data.length; i++) {
                userdat.push(data[i])
            }


            nums.value = nums.value - 100;
            if (nums.value < 100) {
                nums.value = 100;
            }

        } catch (error) {
            console.error("请求失败:", error);
        }
    }
}

// const ce=()=>{
//     // window.location.href = "./home.html";

//     console.log(router.getRoutes())
// }
const counts = async () => {
    try {
        // const { data } = await axios.get("http://10.111.189.128:8080/count");
        const { data } = await axios.get("http://localhost:8080/count");
        // console.log(data)
        count.value = data;

    } catch (error) {
        console.error("请求失败:", error);
    }
}
const dat = async () => {
    try {
        const { data } = await axios.get("http://localhost:8080/dat", {
            params: {
                page: page.value,

            }
        });
        // const { data } = await axios.get("http://localhost:8080/dat");
        userdat.splice(0)
        // console.log(userdat)

        for (let i = 0; i < data.length; i++) {
            userdat.push(data[i])
        }


    } catch (error) {
        console.error("请求失败:", error);
    }
}

onMounted(() => {
    dat(), counts()
})
</script>

<template>
    <div class="a">
        <!-- <button type="button" @click="ce">测试多页面</button> -->
        <table border="1" cellspacing="0" cellpadding="6">
            <tr v-for="item in userdat" :key="item">
                <td colspan="2">{{ item.username }}<br />{{ item.posts.content }}<br />
                    {{ item.posts.like_count }}赞&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp{{ item.posts.comment_count
                    }}评论&nbsp&nbsp&nbsp{{ item.posts.share_count }}分享
                    &nbsp&nbsp&nbsp&nbsp&nbsp
                    {{ item.posts.timestamp }}
                    &nbsp&nbsp&nbsp&nbsp&nbsp
                    {{ item.posts.platform }}
                </td>
            </tr>
            <tr>
                <td align="center"><button type="button" @click="up">
                        < </button>&nbsp&nbsp&nbsp
                            第{{ page }}页/{{ count }}页&nbsp&nbsp&nbsp
                            <button type="button" @click="next">></button></td>
            </tr>
        </table>
        
    </div>
</template>

<style scoped>
.a {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

tr {
  transition: background-color 0.3s;
}

tr:hover {
  background-color: #f5f5f5;
}

td {
  padding: 12px;
  border: 1px solid #e0e0e0;
}

button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #45a049;
}
</style>
